<template>
  <div>
    <Table
      ref="tableMain"
      :columns="columns"
      :stripe="stripe"
      :border="border"
      :show-header="showHeader"
      :width="width"
      :height="height"
      :max-height="maxHeight"
      :loading="loading"
      :size="size"
      :data="data"
      @on-sort-change="tableSort"
      @on-selection-change="tableSelect">
      <!-- 自定义列 -->
      <template v-for="col in columnsTable" slot-scope="{row,column,index}" :slot="col.slot">
        <slot :row="row" :index="index" :column="column" :name="col.slot"></slot>
      </template>
      <slot name="header" slot="header"></slot>
      <slot name="footer" slot="footer"></slot>
      <slot name="loading" slot="loading"></slot>
    </Table>
    <div style="margin: 10px;overflow: hidden">
      <div style="float: right" v-if="pageIng">
        <Page
          ref="selection"
          :current="current"
          :total="total"
          :page-size="pageSize"
          :page-size-opts="pageSizeOpts"
          :size="pageTypeSize"
          :simple="pageSimple"
          :show-total="showTotal"
          :show-elevator="showElevator"
          :show-sizer="showSizer"
          @on-change="handlePage"
          @on-page-size-change="handlePageSize"/>
      </div>
    </div>
  </div>
</template>

<script>

    import {getModulesTables} from '@/api/common'

    export default {
        name: 'dcy-table',
        data() {
            return {
                sidePagination: true, // 服务端模式
                // 表格配置相关
                loading: false, // 表格是否加载中
                // 分页相关
                sortTable: this.sort, // 排序字段
                orderTable: this.order, // 排序类型
                // checkBox:true,// 是否显示checkBox
                current: 1, // 当前页面
                pageSizeTable: this.pageSize, // 每页显示多少条
                total: 0, // 一共多少页
                // pageSizeOpts: [10, 20, 30, 100], // 每页条数选择框
                initPage: 1, // 初始页面
                // 分页相关
                // pageIng: true,
                // showTotal: true,
                // showSizer: true,
                // showElevator: true,
                // 数据相关
                data: [], // 返回数据
                ids: []
            }
        },
        computed: {
            columnsTable() {
                // 自定义列
                return this.columns.filter(e => e.hasOwnProperty('slot'))
            }
        },
        props: {
            // 表格配置
            /* data: {
                        type: Array
                    }, */
            columns: {
                // 列头
                type: Array,
                require: true
            },
            stripe: {
                // 是否显示间隔斑马纹
                type: Boolean,
                default: false
            },
            border: {
                // 是否显示纵向边框
                type: Boolean,
                default: true
            },
            showHeader: {
                // 是否显示表头
                type: Boolean,
                default: true
            },
            width: {
                // 表格宽度，单位 px
                type: [Number, String]
            },
            height: {
                // 表格高度，单位 px，设置后，如果表格内容大于此值，会固定表头
                type: [Number, String]
            },
            maxHeight: {
                // 表格最大高度，单位 px，设置后，如果表格内容大于此值，会固定表头
                type: [Number, String]
            },
            /* loading: {
                        // 表格是否加载中
                        type: Boolean,
                        default: false
                    }, */
            size: {
                // 表格尺寸，可选值为 large、small、default 或者不填
                type: String,
                default: 'default'
            },
            // 分页 相关
            pageIng: {
                // 是否分页
                type: Boolean,
                default: true
            },
            pageSize: {
                // 每页条数
                type: Number,
                default: 10
            },
            pageSizeOpts: {
                // 每页条数切换的配置
                type: Array,
                default: function () {
                    return [10, 20, 30, 100]
                }
            },
            pageTypeSize: {
                // 可选值为small（迷你版）或不填（默认）
                type: String
            },
            pageSimple: {
                // 简洁版
                type: Boolean,
                default: false
            },
            showTotal: {
                // 显示总数
                type: Boolean,
                default: true
            },
            showElevator: {
                // 显示电梯，可以快速切换到某一页
                type: Boolean,
                default: true
            },
            showSizer: {
                // 显示分页，用来改变page-size
                type: Boolean,
                default: true
            },
            // 查询参数配置
            queryParams: {// 查询参数
                type: Object
            },
            uniqueId: {
                type: String, // 每一行的唯一标识
                default: 'id'
            },
            sort: {
                // 排序字段
                type: String,
                default: null
            },
            order: {
                // 排序类型
                type: String,
                default: null
            },
            url: {// url 必须的
                type: String,
                require: true
            },
            checkBox: {
                // 是否显示checkBox
                type: Boolean,
                default: true
            }
        },
        methods: {
            /**
             * page组件 => 页码改变的回调
             * @param value
             */
            handlePage(value) {
                if (this.checkBox) {
                    this.$emit('table-select-val', [])
                }
                this.getData(value)
            },
            /**
             * page组件 => 切换每页条数时的回调
             * @param value
             */
            handlePageSize(value) {
                if (this.checkBox) {
                    this.$emit('table-select-val', [])
                }
                this.pageSizeTable = value
                this.getData(this.initPage)
            },
            /**
             * table组件 => 排序时有效，当点击排序时触发
             * @param column
             */
            tableSort(column) {
                this.sortTable = column.key
                this.orderTable = column.order
                this.getData(this.current)
            },
            /**
             * table组件 => 在多选模式下有效，只要选中项发生变化时就会触发
             * @param selection
             */
            tableSelect(selection) {
                // 获取所有选中值
                this.ids = selection.map(val => val[this.uniqueId])
                // 往父组件传参数
                this.$emit('table-select-val', this.ids)
            },
            /**
             * 获取数据
             * @param pageNum
             */
            getData(pageNum) {
                // 定义分页对象
                let pageObj = {
                    current: pageNum,
                    size: this.pageSizeTable,
                    sort: this.sortTable,
                    order: this.orderTable
                }
                if (this.queryParams != null) {
                    Object.assign(pageObj, this.queryParams)
                }
                this.loading = true
                getModulesTables(this.url, 'get', pageObj).then((response) => {
                    // 是否包含这个key
                    if (response.data.hasOwnProperty('records')) {
                        this.current = pageNum
                        this.data = response.data.records
                        this.total = response.data.total
                    } else {
                        this.data = response.data
                        // 分页相关
                        this.pageIng = false
                    }
                    this.loading = false
                })
            },
            refresh() {
                // 刷新
                this.getData(this.initPage)
            },
            selectAll(bool) {
                this.$refs.tableMain.selectAll(bool)
            }
        },
        created() {
            if (this.checkBox) {
                this.columns.unshift({
                    type: 'selection',
                    width: 60,
                    align: 'center'
                })
            }
        },
        mounted() {
            this.getData(this.initPage)
        }
    }
</script>

<style scoped>

</style>
